<template>
<el-card class="Jurisdiction" style="width：350px">
    <el-row>
        <el-form ref="form" label-width="100px" size="mini">
            <el-form-item label="当前辖区">
                <el-col :span="11">
                    <el-select v-model="townsValue" placeholder="全部">
                        <el-option v-for="(item, index) in towns" :label="item.label" :value="item.value" :key="index">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-select v-model="streetsValue" placeholder="全部">
                        <el-option v-for="item in streets" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="筛选图斑状态">
                <el-col :span="24">
                    <el-select v-model="figureTypeValue" class="btn-block">
                        <el-option v-for="item in figureType" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-form-item>

            <el-form-item label="任务模式">
                <el-col :span="24">
                    <el-select v-model="taskmodelValue" class="btn-block">
                        <el-option v-for="item in taskmodel" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-form-item>

            <el-form-item label="当前任务">{{ currentTask.value.planName }}
            </el-form-item>
        </el-form>
    </el-row>
</el-card>
</template>

<script>
import {
    mapGetters,
    mapState
} from "vuex";
export default {
    name: "Jurisdiction",
    props: ["map", "getMyAll"],
    data() {
        return {
            taskmodelValue: "examine",
            taskmodel: [{
                    label: "任务执行模式",
                    value: "execute",
                },
                {
                    label: "数据查看模式",
                    value: "examine",
                },
            ],
            mapTimer: null,
            // areaArr: null,
            //当前镇
            towns: [],
            townsValue: "",
            //
            streets: [{
                value: "全部",
                label: "全部",
            }, ],
            //当前街道
            streetsValue: "全部",
            //图层筛选
            figureType: [{
                    value: "全部",
                    label: "全部",
                },
                {
                    value: "已采集",
                    label: "已采集",
                },
                {
                    value: "未采集",
                    label: "未采集",
                },
            ],
            figureTypeValue: "全部",
        };
    },
    methods: {
        panToTown(value) {
            switch (value) {
                case "里水镇":
                    this.map.panTo([113.136793, 23.227369]);
                    this.center = [113.136793, 23.227369];
                    break;
                case "狮山镇":
                    this.map.panTo([113.012359, 23.160829]);
                    this.center = [113.012359, 23.160829];
                    break;
                case "大沥镇":
                    this.map.panTo([113.121615, 23.114786]);
                    this.center = [113.121615, 23.114786];
                    break;
                    ///////////防止眼花/////////
                case "罗村街道":
                    this.map.panTo([113.04255, 23.063944]);
                    this.center = [113.04255, 23.063944];
                    break;
                case "丹灶镇":
                    this.map.panTo([112.921315, 23.059877]);
                    this.center = [112.921315, 23.059877];
                    break;
                case "桂城街道":
                    this.map.panTo([113.183875, 23.03225]);
                    this.center = [113.183875, 23.03225];
                    break;
                    ///////////防止眼花/////////
                case "西樵镇":
                    this.map.panTo([112.94087, 22.93736]);
                    this.center = [112.94087, 22.93736];
                    break;
                case "南樵镇":
                    this.map.panTo([112.872017, 22.861839]);
                    this.center = [112.872017, 22.861839];
                    break;
                case "九江镇":
                    this.map.panTo([112.993321, 22.856176]);
                    this.center = [112.993321, 22.856176];
                    break;
                case "全部":
                    this.center = [113.02151029197415, 22.900558123212093];
                    break;
            }
        },
        //舒适化筛选数据
        inintTown() {
            let userInfo = {};
            if (localStorage.getItem("userInfo")) {
                userInfo = JSON.parse(localStorage.getItem("userInfo"));
                this.userInfo = userInfo;
            }
            let code = userInfo.administrativeCode;
            let originCode = code;
            code = code.substring(0, 9);
            if (userInfo.userLevel == 3) {
                this.towns.push({
                    value: "全部",
                    label: "全部",
                });
                let _this = this;
                this.mapTimer = setTimeout(function () {
                    _this.townsValue = "全部";
                    clearTimeout(_this.mapTimer);
                }, 500);
                this.areaTreeArr.forEach((item) => {
                    this.towns.push({
                        value: item.label,
                        label: item.label,
                    });
                });
            } else if (userInfo.userLevel == 4 || userInfo.userLevel == 5) {
                let cun;
                this.areaTreeArr.forEach((item, index) => {
                    if (item.value == code) {
                        cun = this.areaTreeArr[index];
                        this.towns.push({
                            value: item.label,
                            label: item.label,
                        });
                        let _this = this;
                        this.mapTimer = setTimeout(function () {
                            _this.townsValue = item.label;
                            clearTimeout(_this.mapTimer);
                        }, 500);
                    }
                });

                if (userInfo.userLevel == 5 && originCode.length === 12) {
                    cun.children.forEach((item) => {
                        if (item.value == originCode) {
                            this.streets.push({
                                value: item.label,
                                label: item.label,
                            });

                            let _this = this;
                            this.mapTimer = setTimeout(function () {
                                _this.streetsValue = item.label;
                                clearTimeout(_this.mapTimer);
                            }, 500);
                        }
                        console.log(this.streets, this.streetsValue);
                    });
                }
            }
        },
    },

    computed: {
        locCurrentTask() {
            let currentTask = {
                data: {},
                value: {},
            };
            if (localStorage.getItem("currentTask/setCurrentTask")) {
                currentTask = JSON.parse(
                    localStorage.getItem("currentTask/setCurrentTask")
                );
            }
            return currentTask;
        },
        ...mapGetters({
            areaTreeArr: "getTreeData/filtersVillage",
        }),
        ...mapState({
            currentTask: (state) => {
                let currentTask = {};
                if (Object.keys(state.currentTask.Task).length) {
                    currentTask = state.currentTask.Task;
                } else {
                    currentTask = this.locCurrentTask;
                }
                return currentTask;
            },
            areaArr: (state) => {
                return state.getTreeData.Village;
            },
            // userInfo: (state) => {
            //   return state.User.userInfo;
            // },
        }),
    },
    watch: {
        taskmodelValue(value) {
            let obj = null
            if (value === "execute") {
                obj = {
                    label: "任务执行模式",
                    value: "execute",
                }
            } else if (value === "examine") {
                obj = {
                    label: "数据查看模式",
                    value: "examine",
                }
            } else {
                obj = {
                    label: "任务执行模式",
                    value: "execute",
                }
            }
            this.$store.dispatch('taskmodel/getTaskModel',obj)
            .then((obj)=>{
                this.taskmodelValue = obj.value
                if(this.taskmodelValue === 'examine'){
                    this.$router.push({
                        name:"MapExamine"
                    })
                }else{
                    this.$router.push({
                        name:"Map"
                    })
                }
                this.$emit("onTask", obj);
            })
            
        },
        townsValue(val) {
            this.$emit("sendsetFilterProperty", {
                title: "townsValue",
                value: val,
            });
            //移动到对应的镇
            this.panToTown(this.townsValue);
            //根据镇级辖区 匹配村级辖区列表
            return new Promise(() => {
                if (val != "全部") {
                    let arr = [{
                        value: "全部",
                        label: "全部",
                    }, ];
                    this.areaTreeArr.forEach((item) => {
                        if (item.label == val) {
                            item.children.forEach((res) => {
                                arr.push({
                                    value: res.label,
                                    label: res.label,
                                });
                            });
                        }
                    });
                    this.streets = arr;
                } else {
                    this.streets = [{
                        value: "全部",
                        label: "全部",
                    }, ];
                    this.streetsValue = "全部";
                }
            });
        },
        streetsValue(val) {
            this.$emit("sendsetFilterProperty", {
                title: "streetsValue",
                value: val,
            });
        },
        figureTypeValue(val) {
            // this.getMyAll().then((res)=>{
            //     this.$parent.localDataBase = res
            // })
            this.$emit("sendsetFilterProperty", {
                title: "figureTypeValue",
                value: val,
            });
        },
    },

    mounted() {
        this.$store.commit("currentTask/setCurrentTask", this.locCurrentTask);
        this.inintTown();
    },
};
</script>

<style lang="scss" scoped>
.Jurisdiction {
    width: 350px;
    border: 1px solid #000;
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 0px;
    background: rgba(1, 1, 1, 0.7);
    color: #fff;

    // .readonly {
    //   .el-input__inner {
    //     background: #fff;
    //     border: none;
    //     color: #000;
    //   }
    // }
    .el-card__body {
        padding: 10px 10px 0;
    }

    .line {
        text-align: center;
    }

    .el-form-item__label {
        color: #fff !important;
    }
}
</style>
